<template>
	<view class="l-barrage">
		<block v-for="(item,index) in items" :key="index">
			<!-- <view v-if="item.display && index !=0" class="aon" :style="{top: `${item.top}%`,color: item.color,
				  animation: `mymove ${Number(item.time)}s linear forwards`
				  }" :class="{itesms:index%2==0}">
				{{item.text}}
			</view> -->
			<view v-if="item.display " class="aon" :style="{top: `${item.top}%`,animation: `mymove ${Number(item.time)}s linear forwards`}"
			 :class="{itesms:index%2==0}">
				{{item.text}}
			</view>
		</block>
	</view>
</template>

<script>
	let cycle;
	let s = 0;
	export default {
		name: 'l-barrage',
		props: {
			minTime: {
				type: Number,
				default: 6
			},
			maxTime: {
				type: Number,
				default: 9
			},
			minTop: {
				type: Number,
				default: 0
			},
			maxTop: {
				type: Number,
				default: 75
			},
			itemsList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				items: [],
			}

		},
		methods: {
			add(text = '', time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime))) {
				this.items.push({
					text,
					time,
					top: this.setTop(),
					display: 1,
				});
				// console.log('这是在push',this.items)
				// this.$forceUpdate()
			},
			start(itemList) {
				let items = itemList;
				cycle && (clearInterval(cycle));
				// let i = 0,
				// 	len = items.length;
				let i = 0,
					len = items.length;
				let shij = this.setTimeShij(items[i].text)
				cycle = setInterval(() => {
					let time = 10;
					if (i < len) {
						// time = this.setTime(items[i].text);
						this.add(items[i].text, time);
						i++;
					} else {
						console.log('ssssss')
						clearInterval(cycle);
						setTimeout(() => {
							// this.items=[];
							this.start(this.itemsList);
						}, time * 300)
					}
				}, shij)
			},
			setTop() {
				let top = [0, 30, 60];
				if (s > 2) {
					s = 0
				}
				s = s + 1
				return top[s];
			},
			setTime(i) {
				return 5
			},
			setTimeShij(i) {
				let shij= 2500;
				let len = i.length;
				if(len<= 5){
					shij = 800;
				}
				else if(len<= 10){
					shij = 1000;
				}
				else if( len<= 15){
					shij = 1500;
				}
				else if( len<= 20){
					shij = 2000;
				}
				return  shij;
			}
			
		},
		mounted() {
			let that = this;
			console.log(this.itemsList)
			// this.start()
			setTimeout(() => {
				if (that.itemsList.length > 0) {
					// that.items = that.itemsList
					that.start(that.itemsList)
				} else {
					setTimeout(() => {
						if (that.itemsList.length > 0) {
							that.start(that.itemsList)
						} else {
							setTimeout(() => {
								if (that.itemsList.length > 0) {
								that.start(that.itemsList)
								} else {
									that.start(that.itemsList)
								}
							}, 200)
						}
					}, 200)
				}
			}, 100)

		},
		beforeDestroy(){
			console.log('销毁')
			clearInterval(cycle);
			cycle=null
			this.items=[]
		},
		destroyed() {
			console.log('销毁')
			clearInterval(cycle);
			cycle=null
			this.items=[]
		},
		onHide(){
			console.log('隐藏')
			clearInterval(cycle);
			cycle=null
			this.items=[]
		}
	}
</script>

<style>
	.aon {
		position: absolute;
		white-space: nowrap;
		animation: mymove 5s linear forwards;
		animation-timing-function: linear;
		-webkit-animation-timing-function: linear;
		animation-fill-mode: forwards;
		height: 100%;
		min-width: 80upx;
		height: 68upx;
		background: #333333;
		border-radius: 34upx;
		background: #F5F5F5;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 50upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
	}

	.itesms {
		background-color: #333;
		color: #fff;
	}

	.l-barrage {
		z-index: 3;
		width: 100%;
		position: relative;
		height: 450upx;
	}

	@keyframes mymove {
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-moz-keyframes mymove

	/* Firefox */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-webkit-keyframes mymove

	/* Safari and Chrome */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}

	@-o-keyframes mymove

	/* Opera */
		{
		from {
			left: 100%;
		}

		to {
			left: -200%;
		}
	}
</style>
